<template>
    <div class="col-lg-12 control-section">
        <ejs-listview id='listview_template' ref="list" :dataSource='data' :cssClass='cssClass' :showHeader='header' :headerTitle='title' :actionComplete='onComplete' :template='listTemplate'></ejs-listview>

        <div id="action-description">
            <p>This sample demonstrates the Template functionalities of the ListView. Click any news header or thumbnail to open the complete article. To navigate back to the news list, click the back icon at the top left area.
            </p>
        </div>

        <div id="description">
            <p>The above template represents the customizability of the ListView component. Here, data is loaded from JSON and its value is directly mapped to our ListView datasource to load the content.</p>
            <p>This sample, also have the additional elements like bookmark, comments, and share that can be customized to perform the appropriate action by adding our own events.</p>
        </div>
    </div>
</template>
<style>
/* ListView position alignment */

#listview_template.e-listview {
    max-width: 400px;
    margin: auto;
    border-radius: 2px;
    height: 470px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/* ListView header alignment */

#listview_template.e-listview .e-list-header #list-logo {
    margin-top: 2.5px;
    position: absolute;
    right: 20px;
}

/* ListView template customization */

@font-face {
    font-family: 'Bookmarks';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

#listview_template.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
    padding-left: 122px;
}

#listview_template.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
    background: transparent;
    width: 90px;
    height: 90px;
    top: 50%;
    transform: translateY(-50%);
}

#listview_template.e-listview .e-list-item.e-hover {
    background-color: white;
    color: rgba(0, 0, 0, 0.87);
}

#listview_template.e-listview #list-logo {
    float: right;
}

#listview_template.e-listview.e-list-template .clearfix.desc.e-list-wrapper {
    padding-left: 16px;
}

#listview_template.e-listview.e-list-template .clearfix.desc.e-list-wrapper p {
    text-indent: 50px;
}

#listview_template.e-listview .e-list-item.e-has-child.e-hover {
    background-color: #eee;
    transition: 0.8s;
}

#listview_template.e-listview .e-list-item.e-active {
    background-color: white;
}

#listview_template.e-listview .e-list-item.e-level-1.e-has-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#listview_template.e-listview .e-list-item.e-level-1.e-has-child:last-child {
    border-bottom: 0px solid rgba(0, 0, 0, 0.12)
}

#listview_template.e-listview .timeStamp {
    font-size: 10px;
    padding: 4px 0;
}

#listview_template.e-listview .bookmark,
#listview_template.e-listview .share,
#listview_template.e-listview .comments {
    cursor: pointer;
}

#listview_template.e-listview .bookmark::before,
#listview_template.e-listview .share::before,
#listview_template.e-listview .comments::before {
    color: grey;
    font-family: 'Bookmarks';
    margin-left: 3px;
}

#listview_template.e-listview .bookmark::before {
    content: "\e700";
    margin-right: 12px;
    font-size: 16px;
}

#listview_template.e-listview .share::before {
    content: "\e701";
    margin-right: 3px;
    font-size: 13px;
}

#listview_template.e-listview .comments::before {
    content: "\e703";
    margin-right: 12px;
    font-size: 15px;
}

/* ListView theme customization */

.highcontrast #listview_template.e-listview .bookmark::before,
.highcontrast #listview_template.e-listview .share::before,
.highcontrast #listview_template.e-listview .comments::before {
    color: #fff;
}

.highcontrast #listview_template.e-listview .e-list-item.e-active {
    background-color: #333333;
    color: #fff;
}

.material #listview_template.e-listview .e-has-child:hover .e-list-item-header {
    color: #E91E63;
    transition: 0.5s;
}

.fabric #listview_template.e-listview .e-has-child:hover .e-list-item-header {
    color: #275395;
    transition: 0.5s;
}

.bootstrap #listview_template.e-listview .e-has-child:hover .e-list-item-header {
    color: #0644b4;
    transition: 0.5s;
}

.highcontrast #listview_template.e-listview .e-list-item.e-hover {
    background-color: #333333;
    color: #fff;
    border-color: #333333;
}

.highcontrast #listview_template.e-listview .e-list-item.e-has-child.e-hover {
    transition: 0s;
    background-color: #685708;
    border-color: #fff;
    color: #fff;
}

/* Media query */

@media screen and (max-width: 450px) {
    #listview_template.e-listview #list-logo {
        display: none
    }
}

.bootstrap4 #listview_template.e-listview .bookmark::before,
    .bootstrap4 #listview_template.e-listview .share::before,
    .bootstrap4 #listview_template.e-listview .comments::before {
        color: #495057;
    }

</style>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
import { enableRipple } from '@syncfusion/ej2-base';
import { dataSource } from './newsData';
import listtemplateVue from "./list-template.vue";

enableRipple(false);
Vue.use(ListViewPlugin);
export default Vue.extend({
    data: function() {
        return {
            cssClass: 'e-list-template',
            listTemplate: function() {
                return {
                    template: listtemplateVue
                }
            },
            data: dataSource,
            header: true,
            title: 'Syncfusion Blog'
        };
    },

    mounted: function() {
        let share = document.getElementsByClassName('share');
        let comments = document.getElementsByClassName('comments');
        let bookmark = document.getElementsByClassName('bookmark');
        let description = document.getElementsByClassName('e-list-content');
        let timeStamp = document.getElementsByClassName('timeStamp');

        for (let i = 0; i < comments.length; i++) {
            comments[i].setAttribute('title', 'We can customize this element to perform our own action');
            comments[i].addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }

        for (let i = 0; i < bookmark.length; i++) {
            bookmark[i].setAttribute('title', 'We can customize this element to perform our own action');
            bookmark[i].addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }

        for (let i = 0; i < share.length; i++) {
            share[i].setAttribute('title', 'We can customize this element to perform our own action');
            share[i].addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }

        for (let i = 0; i < description.length; i++) {
            description[i].addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }

        for (let i = 0; i < timeStamp.length; i++) {
            timeStamp[i].addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }
    },

    methods: {
        onComplete: function(args) {
            let listHeader = this.$refs.list.$el.childNodes[0];
            let header = listHeader.childNodes[0];
            if (header.style.display === 'none' || listHeader.childNodes.length === 3) {
                if (listHeader.childNodes[2] != null) {
                    let childHeader = listHeader.childNodes[2];
                    childHeader.remove();
                }
            } else {
                let headerEle = this.$refs.list.$el.querySelector('.e-list-header');
                let headerElement = this.$refs.list.$el.querySelector('#list-logo');
                let clone = headerElement.cloneNode(true);
                headerEle.appendChild(clone);
            }
        }
    }
});
</script>
